<template>
    <div class="upload-progress">
        <transition-group name="el-zoom-in-top">
            <div class="upload-item" v-for="(item,i) in fileList" :key="item.uid||item[urlVal]||item[nameVal]+''+i" @click="handlerClick(item)">
                <i class="el-icon-document" :style="{color:item.status==='error'?'#F56C6C':''}"></i>
                <span :style="{color:item.status==='error'?'#F56C6C':''}">{{item[nameVal]}}<i v-if="item.status==='error'" class="error">(上传失败)</i></span>
                <!-- 上传成功显示 -->
                <i class="el-icon-circle-check" v-if="item.status==='success'"></i>

                <!-- 上传成功中 -->
                <template v-if="item.status==='upload'">
                    <i class="progress-val">{{item.percentage}}%</i>
                    <el-progress :percentage="item.percentage" class="progress"></el-progress>
                </template>
                <i class="el-icon-close" @click="fileList.splice(i,1)" v-else></i>
            </div>
        </transition-group>

    </div>
</template>

<script>
export default {
    model: {
        prop: 'fileList',
        event: 'change'
    },
    props: {
        fileList: {
            default: () => [],
            type: Array
        },
        urlVal: {
            default: 'url',
            type: String
        },
        nameVal: {
            default: 'name',
            type: String
        }
    },
    methods: {
        handlerClick (item) {
            console.log(item);
        },
    }
}
</script>

<style lang="scss" scoped>
.upload-progress {
    width: 400px;
    .upload-item {
        transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
        font-size: 14px;
        color: #606266;
        box-sizing: border-box;
        border-radius: 4px;
        width: 100%;
        height: 25px;
        display: flex;
        align-items: center;
        cursor: pointer;
        position: relative;
        margin-top: 5px;
        padding-right: 5px;
        span {
            flex: 1;
            padding: 0 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .el-icon-circle-check {
            color: #67c23a;
        }
        .el-icon-close {
            display: none;
        }
        .progress {
            position: absolute;
            bottom: -5px;
            width: 100%;
            ::v-deep .el-progress-bar__outer {
                height: 2px !important;
            }
            ::v-deep .el-progress-bar {
                padding-right: 0;
                margin-right: 0;
            }
            ::v-deep .el-progress__text {
                display: none;
            }
        }
        .progress-val {
            font-style: normal;
        }
        .error {
            color: #f56c6c;
            font-style: normal;
            font-size: 12px;
        }
    }
    .upload-item:hover {
        background: #f5f7fa;
        .el-icon-close {
            display: block;
        }
        span {
            color: #409eff;
        }
        .el-icon-circle-check {
            display: none;
        }
    }
}
</style>